import React, { useState } from "react";
import {
    Form,
    Input,
    Modal,
    Button,
    Row,
    Col,
    Spin,
    message, Space, Tag, TableProps,
} from "antd";
import {PageInfo} from "@/components/Pagination";
import {NftListApi} from "@/api/Nft.ts";

export default function SearchPage() {
    const [form] = Form.useForm();
    const [searchForm] = Form.useForm();
    const [pageData, setPageData] = useState<PageInfo>({ page: 1 });
    const [tableData, setData] = useState<MessageList>([]);
    // const [tableCol, setCol] = useState<MapKey>([]);
    const [load, setLoad] = useState(true);
    const [total, setTotal] = useState(0);
    const [showModal, setShow] = useState(false);

    // 表头
    const tableCol: TableProps<DebrisListResData>['columns'] = [
        {
            title: '碎片总数',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '总数',
            dataIndex: 'total',
            key: 'total',
        },
        {
            title: '保留数量',
            dataIndex: 'reserve',
            key: 'reserve',
        },
        {
            title: '碎片总价',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '开始时间',
            dataIndex: 'start_time',
            key: 'start_time',
        },
        {
            title: '结束时间',
            dataIndex: 'end_time',
            key: 'end_time',
        },
        {
            title: '添加时间',
            dataIndex: 'create_time',
            key: 'create_time',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a>编辑</a>
                    <a>删除</a>
                </Space>
            ),
        },
    ];

    // 获取列表
    const getDataList = (data: PageInfo) => {
        NftListApi(data).then((res) => {
            const { data, status } = res;
            if (status === 0 && data) {
                let { list, total } = data;
                setTotal(total);
                setData(list.map((i) => ({ ...i, key: i.m_id })));
                setLoad(false);
                return;
            }
        });
    };

    // 添加列表
    const addList = () => {
        // form.validateFields().then((values) => {
        //     addMsg(values).then((res) => {
        //         if (res.status === 0) {
        //             form.resetFields();
        //             message.success(res.msg);
        //             setShow(false);
        //             search();
        //         }
        //     });
        // });
    };

    // 顶部搜索
    const search = () => {
        let data = searchForm.getFieldsValue();
        setPageData({ page: 1 })
        getDataList(data);
    };

    // 页码改版
    const pageChange = (pageData: PageInfo) => {
        let data = searchForm.getFieldsValue();
        getDataList({ ...pageData, ...data });
        setPageData(pageData);
    };

    const tableTop = (
        <Row justify="space-between" gutter={80}>
            <Col style={{ lineHeight: "32px" }}>表格查询</Col>
            <Col>
                <Button type="primary" onClick={() => setShow(true)}>
                    添加消息
                </Button>
            </Col>
        </Row>
    );
    return (
        <div className="search-container">
            <Spin spinning={load}>
                <div className="top-form">
                    <Form layout="inline" form={searchForm}>
                        <Form.Item name="name">
                            <Input placeholder="输入消息名称" />
                        </Form.Item>
                        <Form.Item name="description">
                            <Input placeholder="输入消息描述词" />
                        </Form.Item>
                        <Button onClick={search} type="primary" className="submit-btn">
                            搜索
                        </Button>
                        <Button
                            onClick={() => {
                                searchForm.resetFields();
                                search();
                            }}
                        >
                            清空
                        </Button>
                    </Form>
                </div>
                <MyTable
                    title={() => tableTop}
                    dataSource={tableData}
                    columns={tableCol}
                    pagination={false}
                    saveKey="MyListSearch"
                />
                <MyPagination
                    page={pageData.page}
                    immediately={getDataList}
                    change={pageChange}
                    total={total}
                />
            </Spin>
            <Modal
                title="添加一条记录"
                open={showModal}
                cancelText="取消"
                okText="添加"
                onOk={() => addList()}
                onCancel={() => setShow(false)}
            >
                <Form form={form}>
                    <Form.Item
                        label="消息名称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: "Please input your name!",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="消息描述"
                        name="description"
                        rules={[
                            {
                                required: true,
                                message: "Please input your description!",
                            },
                            {
                                min: 10,
                                message: "The description must be more than 10 words!",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}